<template>
    <div class="page">
        <title-bar title="echarts图表" />
        <div id="piechart" class="box-item"></div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const colors = ref(["#3cb2ef", "#ffed65", "#FD665F", "#59d4d4", "#52d378", "#cc33cc", "#336666"]);
onMounted(() => {
    initBarChart();
})
const initBarChart = () => {
    let barChart = echarts.init(
        document.getElementById("piechart") as HTMLElement
    );
    var option = {
        title: {
            text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
            data: ["销量"],
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
            {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20],
                itemStyle: {
                    color: (params: any) => {
                        return colors.value[params.dataIndex];
                    },
                },
            },
        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    barChart.setOption(option);
    window.addEventListener("resize", function () {
        barChart.resize();
    });
};
</script>
<style lang="scss" scoped>
.box-item {
    width: 100%;
    height: 30vh;
    padding: 20px;
    border: 1px solid #e7e8f2;
    border-radius: 4px;
    background: rgba(255, 255, 255, 1);

    &:hover {
        border: 1px dashed #3cb2ef;
        transform: scale(1.1);
    }
}
</style>